<template>
	<view>
		<u-navbar title=" " bgColor="transparent" leftIconColor="transparent" placeholder>
		</u-navbar>
		<view class="top-bg">
			<image src="/static/image/mine-top-bg.png" mode="aspectFill"></image>
		</view>
		<view class="flex-align px-16 py-12">
			<image :src="companionInfo.avatar || '/static/image/default-avatar.png'" mode="aspectFill"
				class="user-image" @click="toUserInfo"></image>
			<view class="fw-600 lh-2 fs-18 color-fff ps-16 pe-4" @click="toUserInfo">{{ companionInfo.companionName }}
			</view>
			<image src="/static/image/edit-icon.png" mode="aspectFill" class="edit-icon" @click="toUserInfo"></image>
			<view class="flex-1"></view>
			<u-tag text="创建随访" plain shape="circle" color="#fff" borderColor="#fff" @click="toCreate"></u-tag>
		</view>
		<view class="px-16">
			<u-row gutter="10">
				<u-col span="6">
					<view class="data-card p16 br-8" @click="toBalance">
						<view class="flex-align">
							<image src="/static/image/ye-icon.png" mode="aspectFill" class="icon"></image>
							<view class="fw-500 fs-13 lh-2 color-5F6865 flex-1 ps-4">账号余额</view>
							<view class="t-button fw-400 fs-12 lh-2 color-fff px-12 br-24 py-2">提现</view>
						</view>
						<view class="fw-700 color-258463 fs-24 pt-14">{{balance || 0}} <span
								class="fw-400 fs-12 color-5F6865 ps-2">元</span>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="data-card p16 br-8" @click="toIncome">
						<view class="flex-align">
							<image src="/static/image/sy-icon.png" mode="aspectFill" class="icon"></image>
							<view class="fw-500 fs-13 lh-2 color-5F6865 flex-1 ps-4">累计收益</view>
						</view>
						<view class="fw-700 color-258463 fs-24 pt-14">{{totalIncome || 0}} <span
								class="fw-400 fs-12 color-5F6865 ps-2">元</span>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="order-box px-24 py-16 bg-fff mt-12">
			<view class="flex-align" @click="toOrder(0)">
				<view class="flex-1 fw-500 fs-15 lh-2 color-28302E line">我的服务订单</view>
				<view class="fw-400 fs-13 color-28302E pe-2">查看全部</view>
				<u-icon name="arrow-right" color="#0F172A" size="14"></u-icon>
			</view>
			<view class="flex-align flex-between px-8 mt-16">
				<view class="order-item text-center py-4" @click="toOrder(1)">
					<image src="/static/image/dfw-image.png" mode="aspectFill"></image>
					<view class="fw-400 fs-13 lh-2 color-000">待服务</view>
				</view>
				<view class="order-item text-center py-4" @click="toOrder(2)">
					<image src="/static/image/fwz-image.png" mode="aspectFill"></image>
					<view class="fw-400 fs-13 lh-2 color-000">服务中</view>
				</view>
				<view class="order-item text-center py-4" @click="toOrder(3)">
					<image src="/static/image/dpj-image.png" mode="aspectFill"></image>
					<view class="fw-400 fs-13 lh-2 color-000">待评价</view>
				</view>
				<view class="order-item text-center py-4" @click="toOrder(4)">
					<image src="/static/image/ywc-image.png" mode="aspectFill"></image>
					<view class="fw-400 fs-13 lh-2 color-000">已完成</view>
				</view>
			</view>
		</view>

		<!-- 其他 -->
		<view class="mt-4 bg-fff br-8">
			<view class="flex-align p16" @click="toLink('关注公众号')">
				<view class="flex-1 fw-400 fs-15 color-000">关注公众号</view>
				<u-icon name="arrow-right" color="#0F172A" size="15"></u-icon>
			</view>
			<view class="flex-align p16" @click="toFeedback">
				<view class="flex-1 fw-400 fs-15 color-000">意见反馈</view>
				<u-icon name="arrow-right" color="#0F172A" size="15"></u-icon>
			</view>
			<view class="flex-align p16" @click="toLink('隐私条款')">
				<view class="flex-1 fw-400 fs-15 color-000">隐私条款</view>
				<u-icon name="arrow-right" color="#0F172A" size="15"></u-icon>
			</view>
			<view class="flex-align p16" @click="toLink('服务协议')">
				<view class="flex-1 fw-400 fs-15 color-000">服务协议</view>
				<u-icon name="arrow-right" color="#0F172A" size="15"></u-icon>
			</view>
		</view>

		<!-- 登录按钮 -->
	<!-- 	<view class="mt-16 px-32">
			<u-button text="点击登录" @click="toLogin"
				customStyle="background-color: #24C98F;color:#fff;border:none;border-radius:8px;"></u-button>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				companionInfo: {
					avatar: '',
					companionName: ''
				},
				balance: '0.00', //余额
				totalIncome: '0.00', //累计收益
				loading: false
			}
		},
		onShow() {
			this.getCompanionInfo();
			this.getAccountInfo();
			this.publicMessage();
		},
		methods: {
			getCompanionInfo() {
				this.loading = true;
				this.$api.get({
					url: '/companion/updateInfo/info',
					loadingTip: '加载中...',
					success: (res) => {
						if (res) {
							this.companionInfo = res;
						}
					}
				});
			},
			// 获取账户信息
			getAccountInfo() {
				this.$api.get({
					url: '/companion/updateInfo/account-info',
					success: res => {
						this.balance = res.accountBalance;
						this.totalIncome = res.totalIncome;
					}
				});
			},
			//富文本
			toLink(title) {
				let id = null;
				if (title === '隐私条款') {
					id = 1;
				} else if (title === '服务协议') {
					id = 4;
				} else if (title === '关注公众号') {
					id = 6;
				}
				if (id) {
					uni.navigateTo({
						url: `/pages/mine/link?title=${title}&type=${id}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/mine/link?title=${title}`
					});
				}
			},
			//创建随访
			toCreate() {
				uni.navigateTo({
					url: '/pages/mine/createFollowUp'
				})
			},
			//意见反馈
			toFeedback() {
				uni.navigateTo({
					url: '/pages/mine/feedback'
				})
			},
			//累计收益
			toIncome() {
				uni.navigateTo({
					url: '/pages/mine/income'
				})
			},
			// 我的余额
			toBalance() {
				uni.navigateTo({
					url: '/pages/mine/balance'
				})
			},
			toOrder(index) {
				uni.navigateTo({
					url: `/pages/mine/order?current=${index}`
				})
			},
			toUserInfo() {
				uni.navigateTo({
					url: '/pages/mine/userInfo'
				})
			},
			// 跳转到登录页面
			toLogin() {
				uni.navigateTo({
					url: '/pages/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.top-bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;

		image {
			width: 100%;
			height: 576rpx;
		}
	}

	.user-image {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.edit-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.data-card {
		background: linear-gradient(180deg, #DDFFF3 0%, rgba(255, 255, 255, 0.95) 100%);

	}

	.icon {
		width: 32rpx;
		height: 32rpx;
	}

	.t-button {
		background: linear-gradient(180deg, #24C98F 0%, #13C4CD 100%);
	}

	.order-box {
		border-radius: 32rpx 32rpx 0 0;
	}

	.line {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: -8rpx;
			width: 64rpx;
			height: 4rpx;
			background-color: #24C98F;
		}
	}

	.order-item {
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>